import hconfirm from '@/components/hconfirm.vue';
import { createVNode, render, ref, onMounted, onBeforeMount } from 'vue'
import { isEmpty, isFunction } from '@/plugins/util';


export const useConfirm = () => {

    const showConfirm = (config) => {
        return new Promise((resolve, reject) => {
            //promise封装，ok执行resolve，no执行rejectlet

            const containerEle = document.createElement('div');
            containerEle.setAttribute('name', 'hconfirm')
            document.body.append(containerEle);

            // 封装组件属性方法
            const confirmCallback = () => {
                resolve()
                //调用完毕后应该清空节点
                vnode.component.exposed.popShow.value = false
                setTimeout(() => {
                    render(null, containerEle)
                    containerEle.remove();
                }, 1000);
            }

            // 封装组件属性方法
            const cancelCallback = () => {
                reject()
                //清空节点
                vnode.component.exposed.popShow.value = false
                setTimeout(() => {
                    render(null, containerEle)
                    containerEle.remove();
                }, 1000);
            }

            config = config || {};
            const vnode = createVNode(hconfirm, {
                title: config.title,
                content: config.content,
                btn: config.btn,
                styleSet: config.styleSet,
                confirmCallback,
                cancelCallback,
                // containerEle: containerEle
            })
            render(vnode, containerEle);
            // console.log(vnode)
            // console.log(vnode.component.exposed)
        })
    }

    // const closeConfirm = (containerEle) => {
    //     setTimeout(() => {
    //         containerEle.remove();
    //     }, 1000);
    // }


    return {
        showConfirm
    }

}
